<template>
  <div class="people">
    <my-header>
        <!-- v-slot 更接近指令的写法  v-slot 还可以简写 #-->
      <template #left>
        <van-icon @click="$router.back()" name="arrow-left" />
      </template>
      <!-- <template #center="{i}"> 作用域插槽
        人气推荐{{i}}
      </template> -->
      <template #center>
        人气推荐
      </template>
    </my-header>
    <div class="count">
      <my-cart
        v-for="(item, index) in goods"
        :key="index"
        :itemObj="item"
      ></my-cart>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { getGoods } from "../../api/home/index";
import myCart from "../../components/myCart.vue";
import MyHeader from "../../components/myHeader.vue";
export default {
  components: { myCart, MyHeader },
  setup() {
    const goods = ref([]);
    getGoods().then((res) => {
      goods.value = res.data;
    });
    return {
      goods,
    };
  },
};
</script>
<style lang="scss" scoped>
.people {
  height: 100%;
}
.count {
  height: calc(100% - 50px);
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
  background: #fff;
}
</style>